<template>
	<view class="plant-detail">
		<view class="content" v-if="!!plantInfo">
		    <view class="title" v-if="!(type === 'detail')">识别结果：</view>
		    <view class="main" v-if="!!plantInfo">
		        <u-image class="img" width="100%" height="500rpx" :src="dnsName + projectName + plantInfo.src" @error="errorHandle"></u-image>
		        <view class="info">
		            <view class="name">{{ plantInfo.name }}</view>
		            <view class="desc" v-for="(item, index) in plantInfo.info" :key="index" v-if="item.content">
		                <!-- {{mainInfo.baike_info.description}} -->
		                <view class="topic">{{ item.title ? item.title + ':' : '' }}</view>
		                <view class="text">
		                    {{ item.content }}
		                </view>
		            </view>
		            <view class="desc cultivateInfo" v-for="(item1, index1) in plantInfo.cultivateInfo" :key="index1+6">
		                <!-- {{mainInfo.baike_info.description}} -->
		                <view class="topic">{{ item1.title ? item1.title + '：' : '' }}</view>
		                <view class="text">
		                    {{ item1.content }}
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
		<u-empty v-else margin-top="250">暂无数据</u-empty>
	</view>
</template>

<script>
    import { dnsName, projectName } from '@/common/global.js'
	export default {
        name: 'plantDetail',
        props: ['plantInfo', 'type'],
		data() {
			return {
				dnsName: dnsName,
				projectName: projectName
			};
		}
	}
</script>

<style lang="less" scoped>
    @bgColor: #fff;
    .plant-detail {
        .content {
            .title {
                font-weight: bold;
                margin: 15rpx 0;
                padding: 12rpx;
                background: @bgColor;
            }
            
            .desc {
                margin-bottom: 30rpx;
                
                .topic {
                    font-weight: bold;
                    margin: 15rpx 0;
                }
                
                .text {
                    text-indent: 2em;
                    text-align:justify;
                    text-justify: distribute;
                }
            }
            
            .main {
                margin-bottom: 40rpx;
                border-radius: 6rpx;
                
                .img {
                    border: 6rpx dashed #d5d5d5;
                }
                
                .desc {
                    background: @bgColor;
                    padding: 26rpx 26rpx 40rpx 26rpx;
                }
            }
            
            .name {
                font-size: 34rpx;
                font-weight: bold;
                text-align: center;
                padding: 15rpx 0 0 0;
                margin-top: 8rpx;
                background: @bgColor;
            }
        
        }
    }
</style>
